<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>地图定位</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style type="text/css">
        /* 整体页面基础样式 */
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            background-color: #bfabcf; /* 浅紫色背景 */
            color: #333;
            line-height: 1.6;
            transition: background-color 0.5s ease, color 0.5s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #bfabcf; /* 浅紫色 */
            color: white;
            padding: 10px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            width: 100%;
        }

        .navbar ul {
            display: flex;
            justify-content: space-around;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .navbar ul li {
            cursor: pointer;
            padding: 10px 15px;
            transition: background-color 0.3s ease;
        }

        .navbar ul li:hover {
            background-color: #9f83b8; /* 深紫色 */
        }

        /* 标题样式，让标题更突出 */
        h2 {
            color: #343a40; /* 深灰色标题颜色 */
            font-size: 24px;
            margin-bottom: 15px;
        }

        /* 地图容器样式，调整大小、边框及外观 */
        #allmap {
            width: 100%;
            max-width: 800px; /* 设置最大宽度，避免在大屏幕上过于拉伸 */
            height: 500px;
            border: 2px solid #ced4da; /* 浅灰色边框 */
            border-radius: 8px; /* 圆角效果，更显精致 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影，提升立体感 */
            margin-top: 20px;
        }

        /* 地址信息段落样式，优化文字显示 */
        p {
            margin-top: 10px;
            font-size: 16px;
            color: #6c757d; /* 中灰色文字颜色 */
            text-align: center; /* 文字居中 */
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=p2Y3NMBKsKmWrDc79KPESvfKxnLhuioZ"></script>  
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
</head>
<body>

    <!-- 标题 -->
    <h2>地图显示</h2>
    
    <!-- 地图容器 -->
    <div id="allmap"></div>

    <script type="text/javascript">
        // 定位函数
        function getLocation() {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() === BMAP_STATUS_SUCCESS) {
                    // 获取实时位置
                    var map = new BMap.Map("allmap");
                    var point = new BMap.Point(r.point.lng, r.point.lat);
                    map.centerAndZoom(point, 12);
                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                    });
                } else {
                    alert('failed'+ this.getStatus());
                }
            }, {
                enableHighAccuracy: true
            });
        }

        // 页面加载完成后执行定位
        window.onload = getLocation;
    </script>
</body>
</html>